<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-25 10:48:08
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-07 11:28:52
 * @FilePath: /XMate-h5/src/views/messageCenter/messageList/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :class="`flex flex-col h-full`">
    <div v-if="isMac() && isElectron()" class="mac-titlebar"></div>
    <listHead
      v-model="searchText"
      @update:model-value="(v) => debounce(() => onSearch(v))"
    />
    <template v-if="listData.length > 0">
      <div class="flex flex-row items-center bg-[#F0F6FF] pl-4 py-2 text-sm">
        <van-icon class="mr-[10px]" name="info" color="#436BFF"></van-icon>
        点击下方消息，可查看对应实时总结
      </div>
      <div class="flex-auto overflow-y-auto mt-2">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="loadMore"
          >
            <messageCell
              v-for="item of listData"
              :key="item.confId || ''"
              class="mb-4"
              :item="item"
              @clickItem="onClickItem(item)"
            />
          </van-list>
        </van-pull-refresh>
      </div>
    </template>
    <van-empty
      v-else
      :description="searchText ? '请尝试更换关键词' : '暂无消息'"
      class="h-full"
    />
  </div>
</template>

<script setup lang="ts">
import listHead from "./listHead.vue";
import messageCell from "./messageCell.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import "vant/lib/index.css";
// @ts-ignore
import { loadInfoFromPC } from "@/utils/electronTool";
// @ts-ignore
import { isPC, isElectron, isMac, getPlatform } from "@/utils/platformTool";
// @ts-ignore
import { getMsgPage } from "@/services/msgCenter";
// @ts-ignore
import { MsgPageParams, MsgListItemModel } from "@/services/msgCenter/type";
// @ts-ignore
import debounce from "@/utils/debounce";
// @ts-ignore
import { useCustomWebSocket } from "@/composables/useWebSocket";
// @ts-ignore
import { SocketEventType } from "@/services/socketEvent";
import { showToast } from "vant";

const router = useRouter();

const loading = ref<boolean>(false);
const listData = ref<Array<MsgListItemModel>>([]);
const finished = ref<boolean>(false);
const refreshing = ref<boolean>(false);

const searchText = ref("");
const page = ref(0);
const pageSize = ref(40);

const { connect, disconnect, isConnected } = useCustomWebSocket({
  onMessage(eventType: String, eventData: any) {
    if (eventType !== SocketEventType.XMATE_CONF_SUMMARY_MSG) {
      return;
    }
    const { hostUserId, type, orgId, content, bizId: confId } = eventData;
    // 检查是否存在相同的confId
    const existingMsg = listData.value.find(
      (item: MsgListItemModel) => item.confId === confId
    );
    if (existingMsg) {
      return;
    }
    showToast("有新的消息变更");
    onRefresh();
  },
});

onMounted(() => {
  connect();
  if (isElectron()) {
    loadInfoFromPC(() => loadData());
  } else {
    loadData();
  }
});

function onSearch(v: string) {
  searchText.value = v;
  page.value = 0;
  loadData();
}

function loadMore() {
  page.value += 1;
  loadData();
}

function onRefresh() {
  page.value = 0;
  loadData();
}

async function loadData() {
  const params: MsgPageParams = {
    page: page.value,
    size: pageSize.value,
    keyword: searchText.value,
  };

  const data = await getMsgPage(params);

  const list: Array<MsgListItemModel> = data.datas;
  if (page.value === 0) {
    listData.value = list;
  } else {
    listData.value = [...listData.value, ...list];
  }

  finished.value = list.length < pageSize.value;

  loading.value = false;
  refreshing.value = false;
}

function onClickItem(item: MsgListItemModel) {
  router.push({
    path: "/msgCenter/msgDetail",
    query: {
      id: item.confId,
    },
  });
}
</script>

<style scoped lang="less">
.mac-titlebar {
  -webkit-app-region: drag;
  height: 40px;
  display: flex;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  z-index: 10;
}

div {
  &::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道背景色 */
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* 滚动条滑块颜色 */
    border-radius: 3px;

    &:hover {
      background: #a8a8a8; /* 鼠标悬停时的颜色 */
    }
  }
}
</style>
